window.onload=function(){
    let Small=document.getElementsByClassName('smallImg')[0],
        Mask=document.getElementsByClassName('ProductPhotoMask')[0],
        Big=document.getElementsByClassName('bigImg')[0],
        oImg=Big.children,
        Box=document.getElementById('ProductPhoto');
    let [pagex,pagey,x,y,scale,xx,yy] = [0,0,0,0,0,0,0];
    Small.onmouseenter=function(){
        Mask.style.display='block';
        Big.style.display='block';
    }
    Small.onmouseleave=function(){
        Mask.style.display='none';
        Big.style.display='none';
    }
    Small.onmousemove=function(event){
        event=event||window.event;
         pagex=event.pageX||scroll().left+event.clientX;
         pagey=event.pageY||scroll().top+event.clientY;
         x=pagex-Box.offsetLeft-Mask.offsetWidth/2;
         y=pagey-Box.offsetTop-Mask.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>Small.offsetWidth-Mask.offsetWidth){
            x=Small.offsetWidth-Mask.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>Small.offsetHeight-Mask.offsetHeight){
            y=Small.offsetHeight-Mask.offsetHeight;
        }
        Mask.style.left=x+'px';
        Mask.style.top=y+'px';
         scale=oImg[0].offsetWidth/Small.offsetHeight;
         xx=scale*x;
         yy=scale*y;
        oImg[0].style.marginLeft=-xx+'px';
        oImg[0].style.marginTop=-yy+'px';

    }


    /*********/
    function scroll(){
        if(window.pageYOffset!==undefined){
            return {
                'top':window.pageYOffset,
                'left':window.pageXOffset
            };
        }
        else if(document.compatNode==='CSS1Compat'){
            return {
                'top':document.documentElement.scrollTop,
                'left':document.documentElement.scrollLeft
            };
        }
        else{
            return {
                'top':document.body.scrollTop,
                'left':document.body.scrollLeft
            }
        }
    }
    /**********/

}
